<template>
  <div>
    <!-- 头部 -->
    <header class="header">
      <div class="left">
        <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
        <span style="color:#dcdfe5">|</span>
        <span>{{ title }}</span>
      </div>
      <div class="right">
        {{ name }}
      </div>
    </header>
    <!-- main -->
    <div class="main">
      <slot />
    </div>
    <!-- footer -->
    <footer class="footer">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script>
import store from '@/store'
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: store.getters.name
    }
  }

}
</script>

<style lang="scss" scoped>
.main{
  padding: 0 130px;
  padding-bottom: 100px;
  background-color: #f4f6f8;
}
.header{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  line-height: 64px;
  font-size: 16px;
  background-color: #fff;
  .left{
    span{
      margin-right: 4px;
    }
    .arrow{
      cursor: pointer;
    }
  }
  .right{
    text-align: right;
  }
}
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 24px 50px;
    color: #000000d9;
    font-size: 14px;
    background: #fff;
    text-align: center;
  }
</style>
